<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="75px">
            <el-form-item label="专业" prop="specialtyName">
                <el-input v-model="queryParams.specialtyName" placeholder="请输入专业名称" clearable size="small"
                        @keyup.enter.native="handleQuery"/>
            </el-form-item>
            <el-form-item label="专业类型" prop="specialtyType">
                <el-select v-model="queryParams.specialtyType" placeholder="请选择专业类型" clearable size="small">
                    <el-option v-for="dict in specialtyTypeOptions"
                            :key="dict.code"
                            :label="dict.name"
                            :value="dict.code"
                    ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="状态" prop="status">
                <el-select v-model="queryParams.status" placeholder="请选择状态" clearable size="small">
                    <el-option v-for="dict in specialtyStateOptions"
                            :key="dict.code"
                            :label="dict.name"
                            :value="dict.code"
                    >
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item style="margin-left: 10px;">
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" style="margin-left: 10px;" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
            </el-col>
            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>

        <el-table v-loading="loading" :data="specialtyList" row-key="specialtyId" :tree-props="{children: 'children',hasChildren: 'hasChildren'}">
            <el-table-column prop="specialtyName" label="专业名称" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column prop="specialtyType" label="专业类型" :show-overflow-tooltip="true"
                             :formatter="specialtyTypeFormat"></el-table-column>
            <el-table-column prop="orderNum" label="排序"></el-table-column>
            <el-table-column prop="status" label="状态" :formatter="specialtyStateFormat"></el-table-column>
            <el-table-column prop="createTime" label="创建时间" align="center">
                <template slot-scope="scope">
                    <span>{{ parseTime(scope.row.creationDate) }}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="220">
                <template slot-scope="scope">
                    <el-button size="mini" type="text" icon="el-icon-plus" v-if="scope.row.parentId == 0"
                               @click="handleAdd(scope.row)"
                    >新增</el-button>
                    <el-button size="mini" type="text" icon="el-icon-edit"
                            @click="handleUpdate(scope.row)"
                    >修改</el-button>
                    <el-button size="mini" type="text" icon="el-icon-delete"
                            @click="handleDelete(scope.row)"
                    >删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-dialog :title="title" :visible.sync="open" v-if="open" width="660px" append-to-body>
            <specialty ref="specialty" :specialtyStateOptions="specialtyStateOptions" :specialtyTypeOptions="specialtyTypeOptions"
                       @submitForm="getList" @cancelDialog="cancelDialog"></specialty>
        </el-dialog>
    </div>
</template>

<script>
    import {listSpecialty, deleteSpecialty} from "@/api/question/specialtyTree";
    import specialty from "./form/specialty";

    export default {
        name: "index",
        components: {
            specialty
        },
        data() {
            return {
                // 遮罩层
                loading: true,
                //显示搜索条件
                showSearch: true,
                //专业状态字典状态
                specialtyStateOptions: [],
                //专业类型字典状态
                specialtyTypeOptions: [],
                //专业表格数据
                specialtyList: [],
                //查询参数
                queryParams: {
                    specialtyName: undefined,
                    status: undefined,
                },
                //开关
                open: false,
                //标题
                title: "",
            }
        },
        created() {
            this.getList();
            this.getDicts("specialty_status").then(response => {
                this.specialtyStateOptions = response.responseBody.result;
            });
            this.getDicts("specialty_type").then(response => {
                this.specialtyTypeOptions = response.responseBody.result;
            })
        },
        methods: {
            //查询专业树列表
            getList() {
                this.loading = true;
                listSpecialty(
                    {'searchParams': this.queryParams}
                ).then(response => {
                        let rawSpecialtyList = this.handleTree(response.responseBody.result, "specialtyId");
                        //排序
                        this.handleSort(rawSpecialtyList);
                        this.specialtyList = rawSpecialtyList;
                    }
                )
                this.loading = false;
            },
            //排序
            handleSort(arr) {
                this.insertSort(arr);
                for (let i = 0; i < arr.length; i++) {
                    if (arr[i].children.length) {
                        this.handleSort(arr[i].children);
                    }
                }
            },
            //插入排序
            insertSort(arr) {
                let tmp, j;
                for (let i = 1; i < arr.length; i++) {
                    tmp = arr[i];
                    j = i;
                    while (j > 0 && arr[j - 1].orderNum > tmp.orderNum) {
                        arr[j] = arr[j - 1];
                        j--;
                    }
                    arr[j] = tmp;
                }
            },
            //查询
            handleQuery() {
                this.getList();
            },
            //重置
            resetQuery() {
                this.resetForm("queryForm");
                this.handleQuery();
            },
            //重置dialog表单数据
            cancelDialog() {
                this.open = false;
            },
            //新增
            handleAdd(row) {
                this.title = "添加专业";
                this.open = true;
                this.$nextTick(() => {
                    this.$refs.specialty.init(null,row);
                })
            },
            /** 修改按钮操作 */
            handleUpdate(row) {
                this.title = "修改专业";
                this.open = true;
                this.$nextTick(() => {
                    this.$refs.specialty.init(row.specialtyId);
                })
            },
            /** 删除按钮操作 */
            handleDelete(row) {
                this.$confirm('确认删除名称为：（"' + row.specialtyName + '"）的数据项?', "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(() => {
                    deleteSpecialty(row.specialtyId).then(response => {
                        if (response.retCode === '200') {
                            this.msgSuccess("删除成功");
                            this.getList();
                        }
                    })
                }).catch(() => {});
            },
            //专业状态字典翻译
            specialtyStateFormat(row, col) {
                return this.selectDictLabel(this.specialtyStateOptions, row.status);
            },
            //专业类型字典翻译
            specialtyTypeFormat(row, col) {
                return this.selectDictLabel(this.specialtyTypeOptions, row.specialtyType);
            }
        }
    }
</script>
